import React, { useEffect, useState } from "react";
import { Row, Col, Button } from "antd";
import styles from "./wg2.module.css";

const useCountUp = (target: number, speed = 1) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (count < target) {
      timer = setInterval(() => {
        setCount((prev) => {
          if (prev + 10 >= target) {
            clearInterval(timer);
            return target;
          }
          return prev + 10;
        });
      }, speed);
    }
    return () => clearInterval(timer);
  }, [target]);
  return count;
};
interface WeGao2Props {
  activeMainIndex?: number;
}
const WeGao2: React.FC<WeGao2Props> = ({ activeMainIndex = 0 }) => {


  const Year = useCountUp(1988);
  const QYPM = useCountUp(500);
  const HZKH = useCountUp(10000);
  const ZL = useCountUp(2100);

  return (
    <div className={styles.WG2}>
      <div style={{ width: "100%" }}>
        <Row gutter={10} style={{ width: "100%" }}>
          <Col xs={24} sm={12} md={12} lg={12} xl={12}>
            {activeMainIndex === 1 && (
              <div className={`${styles.Left} ${styles.fadeUpEnter}`}>
                <div className={styles.LeftTitle}>我们是威高 ——————</div>
                <div className={styles.LeftOne}>
                  打造全球化<br />医疗器械和医药创新型企业
                </div>
                <div className={styles.LeftTwo}>
                  威高集团秉承科技创新，专注于提升研发和管理能力，紧跟医疗产业发展，提供全周期、安全可靠的医疗系统整体解决方案，致力于成为全球化医疗器械和医药创新型企业，推动全球健康事业的进步。
                </div>
              </div>
            )}
          </Col>
          <Col xs={24} sm={12} md={12} lg={12} xl={12}>
            <div className={styles.Right}>
              <div className={styles.RightTop}>
                {activeMainIndex === 1 && (
                  <div className={`${styles.RightTopOne} ${styles.fadeUpEnter}`}>
                    <div>始建于</div>
                    <div>
                      <span className={styles.RightTitle}>{Year}</span>年
                    </div>
                  </div>
                )}
                {activeMainIndex === 1 && (
                  <div className={`${styles.RightTopTwo} ${styles.fadeUpEnter}`}>
                    <div>拥有专利</div>
                    <div>
                      <span className={styles.RightTitle}>{ZL}</span>+
                    </div>
                  </div>
                )}
              </div>
              <div className={styles.RightBottom}>
                {activeMainIndex === 1 && (
                  <div className={`${styles.RightBottomOne} ${styles.fadeUpEnter}`}>
                    <div>中国企业</div>
                    <div>
                      <span className={styles.RightTitle}>{QYPM}</span>强
                    </div>
                  </div>
                )}
                {activeMainIndex === 1 && (
                  <div className={`${styles.RightBottomTwo} ${styles.fadeUpEnter}`}>
                    <div>合作客户</div>
                    <div>
                      <span className={styles.RightTitle}>{HZKH}</span>+
                    </div>
                  </div>
                )}
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div className={styles.Bottom}>
        <Row>
          <Col xs={12} sm={12} md={12} lg={12} xl={12}>
            <div className={styles.BottomOne}>
              <Row gutter={10}>
                <Col xs={12} sm={8} md={8} lg={5} xl={4}>
                  {activeMainIndex === 1 && (
                    <Button className={styles.TitleButtonOne} type="default">
                      探索威高
                      <svg
                        className={styles.icon}
                        viewBox="0 0 23 10"
                        xmlns="http://www.w3.org/2000/svg"
                        width="2rem"
                        height="1rem"
                      >
                        <path
                          className={styles.iconPath}
                          strokeLinecap="round"
                          stroke="white"
                          strokeWidth="1.52941"
                          d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                        />
                      </svg>
                    </Button>
                  )}
                </Col>
                <Col xs={12} sm={8} md={8} lg={5} xl={4}>
                  {activeMainIndex === 1 && (
                    <Button className={styles.TitleButtonTwo} type="default">
                      播放影片
                      <svg
                        className={styles.icon}
                        viewBox="0 0 23 10"
                        xmlns="http://www.w3.org/2000/svg"
                        width="2rem"
                        height="1rem"
                      >
                        <path
                          className={styles.iconPath}
                          strokeLinecap="round"
                          stroke="white"
                          strokeWidth="1.52941"
                          d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                        />
                      </svg>
                    </Button>
                  )}
                </Col>
              </Row>
            </div>
            <div className={styles.BottomTwo}>
              {activeMainIndex === 1 && (
                <div className={styles.BottomTwoOne}>
                  <div>
                    <img src="/assets/WeGao/svg/1.svg" alt="威高文化" />
                  </div>
                  <div className={styles.BottomTwoTitle}>
                    威高文化
                    <img src="/assets/WeGao/svg/right.svg" alt="right" />
                  </div>
                </div>
              )}
              {activeMainIndex === 1 && (
                <div className={styles.BottomTwoTwo}>
                  <div>
                    <img src="/assets/WeGao/svg/2.svg" alt="威高大事件" />
                  </div>
                  <div className={styles.BottomTwoTitle}>
                    威高大事件
                    <img src="/assets/WeGao/svg/right.svg" alt="right" />
                  </div>
                </div>
              )}
              {activeMainIndex === 1 && (
                <div className={styles.BottomTwoThree}>
                  <div>
                    <img src="/assets/WeGao/svg/3.svg" alt="威高荣誉" />
                  </div>
                  <div className={styles.BottomTwoTitle}>
                    威高荣誉
                    <img src="/assets/WeGao/svg/right.svg" alt="right" />
                  </div>
                </div>
              )}
            </div>
          </Col>
        </Row>
      </div>
    </div>)
}

export default WeGao2;